<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-继续</title>
    <script src="../js/vue.js"></script>
</head>
<body>
	
	<div class="test-01" >
		测试数据01：{{a}}<br/>
		测试数据02：{{b}}<br/>
		测试数据03：{{ e ? a : b}}<br/>
		测试数据04：{{ c.reverse().join('')}}<br/>
		测试数据05：<b v-if="e">Hello!</b><br/>
		测试数据06：<a v-bind:href="url1">百度链接</a><br/>
		测试数据06：<a :href="url2">淘宝链接</a><br/>
		测试数据07：<button v-on:click="a = 'a变了'">Change a</button><br/>
		测试数据08：<button @click="doSomething">事件</button>
	</div>
	<!--处理单次插值，今后的数据变化就不会再引起插值更新了{{*a}} // 测试·失效-->
	<!--<span class="test-01">
		测试数据02：{{* a}} 
	</span>-->
<script>
    var test = { 
    	a: 1,
    	b:"数据1",
    	c:[1,2,3,4,5],
    	cc:[],
    	d:{
    		name:"对象数据名",
    		data:88,
    		fn:function(){
    			console.log("测试对象方法");
    		}
    	},
    	e:true,
    	url1:"http://www.baidu.com",
    	url2:"http://www.taobao.com"
    };
    //这会阻止修改现有对象的属性
    //Object.freeze(test);
    var vm = new Vue({
    	el:".test-01",
        data: test,
        methods:{
        	doSomething : function() {
        		alert("你干了一件事！");
        	}
        }
    });
    //读取绑定数据元素vm.$el
    //console.log(vm.$el);
    //监听数据更新/回调vm.$watch("更新数据")
  	vm.$watch('a', function (newVal, oldVal) {
  		console.log("a被修改了");
	});
   setTimeout(function(){
   	vm.d.fn();
   	//读取绑定数据vm.$data.a（=vm.a）
   	vm.a = 12;
   	vm.$data.b = "我改了b";
   },2000);
</script>
</body>
</html>